<template>
    <div>
        <v-progress-linear v-if="loading" indeterminate ></v-progress-linear>
         <v-app-bar app elevation="0" dense color="white">
            <v-btn icon @click="$router.go(-1)">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-toolbar-title class="text-center flex-grow-1 subtitle-1">{{take_sucess ? "抢单成功" : "客户信息"}}</v-toolbar-title>
            <v-btn plain text :ripple="false">
            </v-btn>
        </v-app-bar>

        <v-container v-if="!take_sucess">
            <v-card elevation="1" class="pa-4 text--primary sticky-info">
                <v-row dense class="align-center">
                    <v-col cols="12">
                        <span class="font-weight-bold subtitle-1">{{loan.name}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">贷款类别: </span>
                        <span class="font-weight-regular primary--text">{{loan.category_type}}</span>
                    </v-col>
<!--                     <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">征信情况1: </span> <span class="font-weight-regular">一般</span>-->
<!--                    </v-col>-->
                    <v-col cols="6">
                        <span class="text--secondary">贷款金额: </span>
                        <span class="primary--text font-weight-bold subtitle-2" v-if="loan.amount_start == loan.amount_end">{{loan.amount_start_zh}}</span>
                        <span class="primary--text font-weight-bold subtitle-2" v-else>{{loan.amount_start_zh}}-{{loan.amount_end_zh}}</span>
                        元
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">抢单需要: </span>
                        <span class="primary--text font-weight-bold subtitle-2">{{loan.need_ticket}}</span>
                        金币
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">渠道: </span>
                        {{loan.channel_name}}
                    </v-col>
                     <v-col cols="12">
                        <span class="text--secondary">申请时间: </span>
                         <span>{{loan.apply_at ? loan.apply_at.substring(0, 10).replaceAll("-", "/") : ''}}</span>
                    </v-col>
                </v-row>
            </v-card>

<!--            <p class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center">-->
<!--                <v-icon small class="mr-1">mdi-account-tie</v-icon>基本信息-->
<!--            </p>-->
<!--             <v-card elevation="0" class="pa-4 text&#45;&#45;primary">-->
<!--                <v-row dense class="align-center">-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">年龄: </span>-->
<!--                        <span class="font-weight-regular">{{loan.profile.age}}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">性别: </span>-->
<!--                        <span class="font-weight-regular">{{loan.profile.gender}}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">学历: </span>-->
<!--                        <span class="font-weight-regular">{{loan.profile.education}}</span>-->
<!--                    </v-col>-->
<!--                     <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">联系方式: </span>-->
<!--                        <span class="font-weight-regular">请先抢单</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">城市: </span>-->
<!--                        <span class="font-weight-regular">{{loan.city}}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">月收入: </span>-->
<!--                        <span class="font-weight-regular">{{loan.profile.salary}}</span>-->
<!--                    </v-col>-->
<!--                     <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">工资发放模式: </span>-->
<!--                        <span class="font-weight-regular">{{loan.profile.pay_method}}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">社保缴费年数: </span>-->
<!--                        <span class="font-weight-regular">{{loan.profile.social_insurance_age}}</span>-->
<!--                    </v-col>-->
<!--                </v-row>-->
<!--            </v-card>-->




            <p class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center" >
                <v-icon small class="mr-1">mdi-account-tie</v-icon>资产情况
            </p>
             <v-card elevation="0" class="pa-4 text--primary">
                <v-row dense class="align-center">
                     <v-col cols="6">
                        <span class="text--secondary">是否有房: </span>
                        <span class="font-weight-regular">{{loan.has_house}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">是否有车: </span>
                        <span class="font-weight-regular">{{loan.has_car}}</span>
                    </v-col>
                     <v-col cols="6">
                        <span class="text--secondary">是否有社保: </span>
                        <span class="font-weight-regular">{{loan.has}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">是否有公司: </span>
                        <span class="font-weight-regular">{{loan.yingyezhizhao}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">是否有公积金: </span>
                        <span class="font-weight-regular">{{loan.has_gongjijin}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">芝麻分: </span>
                        <span class="font-weight-regular">{{loan.zhima}}</span>
                    </v-col>
                </v-row>
            </v-card>

            <p class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center" v-if="loan.category_type == '精准车'">
                <v-icon small class="mr-1">mdi-office-building-outline</v-icon>车辆情况
            </p>
             <v-card elevation="0" class="pa-4 text--primary" v-if="loan.category_type == '精准车'">
                <v-row dense class="align-center">
                    <v-col cols="6">
                        <span class="text--secondary">车辆信息: </span>
                        <span class="font-weight-regular">{{loan.car.info}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">汽车型号: </span>
                        <span class="font-weight-regular">{{loan.car.car_model}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">预估价: </span>
                        <span class="font-weight-regular">{{loan.car.car_price_estimation}}</span>
                    </v-col>
                </v-row>
            </v-card>


            <p class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center" v-if="loan.category_type == '精准公积金'">
                <v-icon small class="mr-1">mdi-office-building-outline</v-icon>公积金情况
            </p>
            <v-card elevation="0" class="pa-4 text--primary" v-if="loan.category_type == '精准公积金'">
                <v-row dense class="align-center">
                    <v-col cols="6">
                        <span class="text--secondary">上班公司名字全称: </span>
                        <span class="font-weight-regular">{{loan.profile.company_name}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">工资发放模式: </span>
                        <span class="font-weight-regular">{{loan.profile.pay_method}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">每个月工资多少: </span>
                        <span class="font-weight-regular">{{loan.profile.month_salary}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">已购买公积金多少年: </span>
                        <span class="font-weight-regular">{{loan.profile.provident_age}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">每月公积金额度: </span>
                        <span class="font-weight-regular">{{loan.profile.month_provident}}</span>
                    </v-col>
                </v-row>
            </v-card>


            <p class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center" v-if="loan.category_type == '精准房'">
                <v-icon small class="mr-1">mdi-office-building-outline</v-icon>房情况
            </p>
            <v-card elevation="0" class="pa-4 text--primary" v-if="loan.category_type == '精准房'">
                <v-row dense class="align-center">
                    <v-col cols="6">
                        <span class="text--secondary">房屋类型: </span>
                        <span class="font-weight-regular">{{loan.house.type}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">是否持有房产证: </span>
                        <span class="font-weight-regular">{{loan.house.has_certificate}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">房子最新评估价: </span>
                        <span class="font-weight-regular">{{loan.house.latest_estimated}}</span>
                    </v-col>
                </v-row>
            </v-card>


            <p class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center" v-if="loan.category_type == '精准企业主'">
                <v-icon small class="mr-1">mdi-office-building-outline</v-icon>企业主情况
            </p>
            <v-card elevation="0" class="pa-4 text--primary" v-if="loan.category_type == '精准企业主'">
                <v-row dense class="align-center">
                    <v-col cols="6">
                        <span class="text--secondary">公司名字: </span>
                        <span class="font-weight-regular">{{loan.company.company_name}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">年缴税: </span>
                        <span class="font-weight-regular">{{loan.company.annal_tax}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">年营业额: </span>
                        <span class="font-weight-regular">{{loan.company.annal_turnover}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">营业执照办理了几年: </span>
                        <span class="font-weight-regular">{{loan.company.company_age}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">是否为法人: </span>
                        <span class="font-weight-regular">{{loan.company.is_legal_person}}</span>
                    </v-col>
                </v-row>
            </v-card>


            <p class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center" v-if="loan.status == 0">
                <v-icon small class="mr-1">mdi-tray-full</v-icon>详细信息抢单后查看
            </p>
             <v-btn block rounded large :loading="taking" @click="take"  color="primary" class="mt-4">一键抢单</v-btn>

        </v-container>

        <v-container v-else class="pa-6">
            <v-card class="px-8 pt-8 pb-8">
                <v-row no-gutters>
                    <v-col cols="12">
                        <div class="text-center">
                            <v-icon x-large color="primary">mdi-check-circle</v-icon>
                        </div>
                        <div class="text-center font-weight-bold subtitle-1">
                            抢单成功
                        </div>
                        <div class="text-center font-weight-bold subtitle-1">
                            快联系客户吧
                        </div>
                    </v-col>
                    <v-col cols="6" class="text--secondary mt-8">
                        <span>客户姓名</span>
                    </v-col>
                     <v-col cols="6" class="text-right mt-8">
                        <span class="subtitle-2">{{loan.name}}</span>
                    </v-col>
                     <v-col cols="6"  class="text--secondary mt-2">
                        <span>贷款类别: </span>
                    </v-col>
                    <v-col cols="6" class="text-right mt-2">
                        <span class="font-weight-regular primary--text">{{loan.category_name}}</span>
                    </v-col>
                    <v-col cols="6" class="text--secondary mt-2">
                        <span>贷款金额: </span>
                    </v-col>
                    <v-col cols="6" class="text-right mt-2">
                        <span class="primary--text font-weight-bold subtitle-2" v-if="loan.amount_start == loan.amount_end">{{loan.amount_start_zh}}</span>
                        <span class="primary--text font-weight-bold subtitle-2" v-else>{{loan.amount_start_zh}}-{{loan.amount_end_zh}}</span>
                        <span class="primary--text text-caption">元</span>
                    </v-col>
                </v-row>
            </v-card>

            <v-btn block color="primary" class="mt-8" :to="`/user/loan/${this.id}`" replace>
                立即查看
            </v-btn>
        </v-container>
    </div>
</template>

<script>
import axios from "axios";


export default {
    data: () => ({
        id: 0,
        loan: {
            profile: {},
            house: {},
            car: {},
            company: {}
        },
        loading: false,
        taking: false,
        take_sucess: false
    }),
    watch: {
        id(v) {
            this.load();
        }
    },

    created() {
        this.id = this.$route.params.id;
    },

    beforeRouteUpdate(to, from, next) {
        this.id = to.params.id;
        next();
    },
    methods: {
        load() {
            this.loading = true;
            const that = this;
            axios.get(`/v1/loan/${this.id}`).then((response) => {
                if (response.data.code == 0) {
                    that.loan = response.data.data;
                 } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                 }
            })
            .catch(function () {})
            .then(function () {
                that.loading = false;
            });
        },

        take() {
            this.taking = true;
            const that = this;
            axios.post(`/v1/loan/${this.id}/take`).then((response) => {
                if (response.data.code == 0) {
                    that.$toasted.show(response.data.msg);
                    that.take_sucess = true;
                 } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                 }
            })
            .catch(function () {})
            .then(function () {
                that.taking = false;
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.border-left-red {
    border-left: 3px solid #BA2B39;
}

.grid-btn .v-btn .v-btn__content {
    flex-direction: column-reverse;
    height: inherit;
}

div.bg-curved {
  position: absolute;
  overflow: hidden;
  height: 180px;
  width: 100%;
}


div.bg-curved::before {
    background-color: #BA2B39;
    border-radius: 100%;
    position: absolute;
    right: -200px;
    left: -200px;
    top: -200px;
    content: '';
    bottom: 0;
}

.theme--light.half-transparent.v-text-field--solo>.v-input__control> .v-input__slot
{
    background-color: rgb(255 255 255 / 71%);
}

.sticky-info {
    position: sticky;
    top: 60px;
    z-index: 2;
}
</style>
